<template>
	<div class="lm-chatgpt-item">
		<chatgpt-item-header :text="'正在为您生成推荐答案：客户画像'"></chatgpt-item-header>
		<!-- <chatgpt-item-header text="根据历史对话，已为您洞察客户需求.."></chatgpt-item-header> -->
		<div class="chatgpt-item-content">
			<div class="item-section-title">客户标签</div>
			<div class="section-title">
				<span class="label">会话标签</span>
				<span class="delete-btn" @click="clickDeleteTag">{{isDelTag ? '完成删除' : '删除'}}</span>
			</div>
			<edit-button-group :itemList="opeTagList" addText="新增标签" :isDel="isDelTag" showField="tag_name" 
				@comfirmAdd="comfirmAddTag"
				@confirmDelete="confirmDeleteTag"></edit-button-group>
			<div class="section-title">
				<span class="label">标签系统</span>
			</div>
			<edit-button-group :itemList="normalTagList" :isEditGroup="false" showField="tag_name" ></edit-button-group>
			<div class="item-section-title" style="margin-top: 22px">客户意图</div>
			<div class="section-title">
				<span class="label">本次意图</span>
				<span class="delete-btn" @click="clickDeleteIntention">{{isDelIntention ? '完成删除' : '删除'}}</span>
			</div>
			<edit-button-group :itemList="opeIntentionList" addText="新增意图" :isDel="isDelIntention" showField="intention_name"
				@comfirmAdd="comfirmAddIntention"
				@confirmDelete="confirmDeleteIntention"></edit-button-group>
			<div class="section-title">
				<span class="label">历史意图</span>
			</div>
			<edit-button-group :itemList="normalIntentionList" :isEditGroup="false" showField="intention_name"></edit-button-group>
		</div>
	</div>
</template>

<script>
import ChatgptItemHeader from './chatgpt-item-header'
import EditButtonGroup from '@/components/common/edit-button-group'
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'ClientPortraitItem',
	props: {
		item: Object
	},
	components: {
		ChatgptItemHeader,
		EditButtonGroup
	},
	data() {
		return {
			isDelTag: false, // 是否正在删除标签
			isDelIntention: false, // 是否正在删除意图
			opeTagList: [],
			normalTagList: [
				// {
				// 	tag_name: '高收入人群',
				// },
			],
			opeIntentionList: [],
			normalIntentionList: [],
		}
	},
	watch: {
		portraitInfo: {
			handler(val) {
				// console.log(val)
				this.opeTagList = val.sesstionTag ? val.sesstionTag.map(u => {
					u.itemStatus = 'normal'
					return u
				}) : []
				this.opeIntentionList =  val.intentionArray ? val.intentionArray.map(u => {
					u.itemStatus = 'normal'
					return u
				}) : []
				this.normalIntentionList = val.historyIntentionArray ? val.historyIntentionArray.map(u => {
					u.itemStatus = 'normal'
					return u
				}): []
			},
			immediate: true,
			deep: true
		}
	},
	computed: {
		...mapState('lm-chat', ['currentSessionInfo', 'currentClientId', 'portraitInfo'])
	},
	methods: {
		// 点击删除标签
		clickDeleteTag() {
			this.isDelTag = !this.isDelTag
			this.opeTagList = this.opeTagList.map(u => {
				u.itemStatus = this.isDelTag ? 'delete' : 'normal'
				return u
			})
		},
		// 点击删除意图
		clickDeleteIntention() {
			this.isDelIntention = !this.isDelIntention
			this.opeIntentionList = this.opeIntentionList.map(u => {
				u.itemStatus = this.isDelIntention ? 'delete' : 'normal'
				return u
			})
		},
		// 确定新增标签
		comfirmAddTag(item, isEdit) {
			let params = {
				tag_name: isEdit ? item.tag_name : item.addInputText,
				tag_type: '',
				user_id: this.currentClientId,
				session_id: this.currentSessionInfo.session_id
			}
			if(isEdit) {
				params.id = item.id
			}
			this.$usePost(this.$url.addTag, params).then(res => {
				let data = res.data
				if(!isEdit) {
					this.opeTagList.push({
						...data,
						itemStatus: 'normal'
					})
				}
				this.$public.message(this, 'success', '操作成功')
			})
		},
		// 确定删除标签
		confirmDeleteTag(item, index) {
			this.$usePost(this.$url.deleteByUserIdAndTagId, {
				user_id: this.currentClientId,
				id: item.id
			}).then((res) => {
				this.opeTagList.splice(index, 1)
				this.$public.message(this, 'success', '处理成功')
			})
		},
		// 确定新增意图
		comfirmAddIntention(item, isEdit) {
			let params = {
				intention_name: isEdit ? item.intention_name : item.addInputText,
				user_id: this.currentClientId,
				session_id: this.currentSessionInfo.session_id
			}
			if(isEdit) {
				params.id = item.id
			}
			this.$usePost(this.$url.addUserUntentionCustom, params).then(res => {
				let data = res.data
				if(!isEdit) {
					this.opeIntentionList.push({
						...data,
						itemStatus: 'normal'
					})
				}
				this.$public.message(this, 'success', '操作成功')
			})
		},
		// 确定删除意图
		confirmDeleteIntention(item, index) {
			this.$usePost(this.$url.deleteUserUntentionCustom, {
				user_id: this.currentClientId,
				id: item.id
			}).then((res) => {
				this.opeIntentionList.splice(index, 1)
				this.$public.message(this, 'success', '处理成功')
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.chatgpt-item-content{
	margin-top: 5px;
	.item-section-title{
		margin-bottom: 16px;
	}
	.section-title{
    margin: 8px 0 12px;
		.delete-btn{
			display: inline-block;
			margin-left: 12px;
			color: #4686F2;
			cursor: pointer;
		}
	}
	.item-section-content{
		display: flex;
		flex-wrap: wrap;
		.inner-item-wrap{
			max-width: 50%;
			margin-right: 10px;
			&.add{
				margin-right: 0px;
				.inner-item{
					padding: 7px 12px;
					color: #4686F2;
					cursor: pointer;
					.add-icon{
						margin-right: 6px;
					}
				}
			}
			.inner-item{
				display: flex;
				align-items: center;
				border: 1px solid #D1D4FF;
				border-radius: 16px;
				padding: 9px 12px;
				line-height: 1;
				flex:1;
				.text{
					display: inline-block;
				}
				.icon{
					width: 12px;
					height: 12px;
					margin-left: 4px;
					flex-shrink: 0;
				}
			}
			.edit-input{

			}
			.add-input{
				border: 1px solid #43639b;
				outline: none;
				border-radius: 2px;
				padding: 2px;
				color: #43639b;
				font-size: 12px;
				height: 22px;
				line-height: 22px;
			}
		}
	}

}
</style>